<template>
  <view class="page_min_height page_bg p-12 page_fixed_button">
    <DataLoading v-if="loading" />
    <template v-else>
      <view class="bg-white rounded-md">
        <view class="flex justify-between gap-x-12 p-12">
          <view class="relative w-130 p-8 border border-solid border-gray-200 rounded-md">
            <image class="w-full h-150" :src="detailInfo.thumbnail?.file_url" mode="aspectFill" />
          </view>
          <view class="flex-1 flex flex-col justify-between pb-4">
            <view>
              <view class="text-base font-bold">{{ detailInfo.title }}</view>
              <view class="mt-6 text-blue-600 text-xs">#{{ detailInfo.category?.name }}</view>
              <view class="mt-12 text-gray-500 text-xs">
                <text>10次浏览</text>
                <text class="ml-10">3次下载</text>
              </view>
            </view>
            <view class="flex justify-between items-center">
              <view v-if="detailInfo.price">
                <text class="text-gray-400">售价</text>
                <text class="ml-2 text-red-500">￥</text>
                <text class="text-xl text-red-500 font-bold">{{ detailInfo.price }}</text>
              </view>
              <view v-else class="text-red-500 font-bold">免费</view>
              <view class="primary_btn px-16 py-6 font-bold rounded-full" @click="download">下载文档</view>
            </view>
          </view>
        </view>
        <!-- 声明 -->
        <view class="p-12">
          <view class="bg-gray-100 rounded-md">
            <view class="px-12 py-8 text-xs text-gray-400">
              声明：本文档由律师提供并上传，内容解释权归属内容提供方，若内容存在侵权，请联系客服举报下架。
            </view>
          </view>
        </view>
      </view>
      <!-- 文档预览 -->
      <view class="relative mt-12 py-12 bg-white rounded-md">
        <view class="absolute top-4 left-4 px-12 py-4 bg-gray-100 text-gray-400 rounded-md z-10">文档预览</view>
        <view class="p-12">
          <image class="w-full" :src="detailInfo.thumbnail?.file_url" mode="widthFix" />
        </view>
        <view class="pb-12 text-blue-500 text-center" @click="download">
          <text v-if="isBuy">如要查看全文，您可以下载文档后查看</text>
          <text v-else>下载后可查看全文</text>
        </view>
      </view>
      <!-- 广告位 -->
      <view class="mt-12">
        <button class="flex reset_btn" open-type="contact">
          <image src="/static/images/ad.png" class="w-full" mode="widthFix" />
        </button>
      </view>
      <!-- 相似合同 -->
      <view v-if="similarList.length" class="mt-12 pt-12 bg-white rounded-md">
        <view class="px-12 text-base font-bold">相同类型合同模板</view>
        <view class="p-12 grid grid-cols-2 gap-20">
          <view v-for="item in similarList" :key="item.id">
            <view class="relative pt-12 px-8 border border-solid border-gray-200 rounded-md" @click="toDetail(item.id)">
              <image class="w-full h-210" :src="item.thumbnail?.file_url" mode="aspectFill" />
              <view
                class="absolute bottom-[-2px] left-[-2px] w-[102%] py-12"
                style="background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)"
              >
                <view class="flex justify-center items-center">
                  <view class="primary_btn px-26 py-4 rounded-full">下载</view>
                </view>
                <view class="flex justify-center items-center mt-10">
                  <image class="w-20 h-20 rounded-full" :src="item.lawyer?.photo" mode="aspectFill" />
                  <view class="ml-4 text-gray-600 text-xs">{{ item.lawyer?.name }}</view>
                </view>
              </view>
            </view>
            <view class="text-base font-bold line-clamp-1">{{ item.title }}</view>
            <view class="flex justify-between items-center mt-6">
              <view class="text-blue-600 text-xs">#{{ item.category?.name }}</view>
              <view class="text-gray-500 text-xs">下载3次</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 底部 -->
      <view
        class="fixed bottom-0 left-0 w-full p-12 bg-white rounded-t-xl rounded-r-xl shadow-[1px_0_6px_0_rgba(0,0,0,0.15)]"
        style="padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx)"
      >
        <view class="flex justify-between items-center">
          <view class="flex items-center">
            <image class="w-40 h-40 rounded-full" :src="detailInfo.lawyer?.photo" mode="aspectFill" />
            <view class="ml-10">
              <view class="text-base font-bold">{{ detailInfo.lawyer?.name || '-' }}</view>
              <view class="w-180 mt-4 text-gray-500 text-xs line-clamp-1">
                擅长：{{ detailInfo.lawyer?.specialty || '-' }}
              </view>
            </view>
          </view>
          <view class="flex items-center">
            <view v-if="isBuy" class="mr-10 text-green-400">
              <uni-icons type="checkbox" color="" size="16" />
              <text class="ml-2">已购买</text>
            </view>
            <view class="primary_btn px-16 py-6 font-bold rounded-full" @click="download">下载文档</view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getTemplateDetailApi, downloadTemplateApi } from '@/api/contract';
import { useUserIdentity } from '@/utils/usePublic';
import { openDocument } from '@/utils/index';
import { showLoginConfirm, showToast } from '@/utils/utils';

const userIdentity = useUserIdentity();
const loading = ref(true);
const detailInfo = ref({});
const similarList = ref([]);

onLoad(async ({ id }) => {
  const { code, data } = await getTemplateDetailApi(id);
  loading.value = false;
  if (code === 200) {
    detailInfo.value = data;
  }
});

const isBuy = ref(false);
// 查看详情
function toDetail() {
  uni.navigateTo({
    url: '/pages/contract/template/detail',
  });
}
// 下载模板
async function download() {
  if (!userIdentity.isLogin) {
    showLoginConfirm();
    return;
  }
  if (!userIdentity.isCustomer) {
    showToast('您还不是我们的客户哦~');
    return;
  }
  const { code, data } = await downloadTemplateApi(detailInfo.value.id);
  if (code === 200 && data.file_info?.file_url) {
    openDocument(data.file_info.file_url);
  } else {
    showToast('下载文件失败');
  }
}
</script>
